<template>
  <div o-Container>
    <div class="top_box">
      <div class="search_box">
        <img src="/static/skin/herodoo/main/platform/home/img/search.png" alt="" />
        <input :value="searchValue" type="text" placeholder="请输入搜索内容" @keydown.enter="searchEnterKeyPress"
          @blur="searchEnterKeyPress" />
        <img @click="fdrawerOp()" src="/static/skin/herodoo/main/platform/home/img/shaixuan.png" alt="" />
      </div>
      <div class="button_box">
        <button @click="handleCreate">创建活动</button>
      </div>
    </div>
    <o-list v-bind:source="list.contract">
      <template slot="config" slot-scope="scope">
        <div class="img_box">
          <el-tooltip class="item" effect="dark" content="查看" placement="bottom">
            <img @click="showMsgDialog(scope)" src="/static/skin/default/MCS/AIGC/Inventory/images/chakan.png" alt="" />
          </el-tooltip>

          <el-tooltip class="item" effect="dark" content="编辑" placement="bottom">
            <img :class="{ can_edit: scope.data.row.Status != 0 }" @click="showEditDialog(scope)"
            src="/static/skin/default/MCS/AIGC/Inventory/images/bianji.png" alt="" />
          </el-tooltip>

          <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
            <img :class="{ can_edit: scope.data.row.Status != 0 }" @click="delActivity(scope)"
            src="/static/skin/default/MCS/AIGC/Inventory/images/shanchu.png" alt="" />
          </el-tooltip>
        </div>
      </template>
    </o-list>
    <!-- 查看 -->
    <activityMsg :messageList="messageList" ref="activityMsg" @showEdit="showEdit" @refresh="refresh"></activityMsg>
    <!-- 编辑 -->
    <editActivity :activityId="activityId" :messageList="messageList" ref="editActivity" @refresh="refresh">
    </editActivity>
    <!-- 精细化筛选 -->
    <screen-activity @searchFun="search" ref="ScreenActivity"></screen-activity>
  </div>
</template>

<script>
import activityMsg from "./activityMsg.vue";
import editActivity from "./editActivity.vue";
import ScreenActivity from "./screenActivity.vue";
export default {
  name:
    "mms_platform_company_list" /* 这个name暂时不知道用啥用，根据官方文档说的是方便排错的 */,
  components: {
    activityMsg,
    editActivity,
    ScreenActivity
  },
  data() {
    return {
      octopus: this.$parent.octopus,
      list: {
        contract: {
          data: {
            id: 1342,
            cellData: [
              { name: "Name", width: 300 }, // 活动名称|标题
              { name: "Address", width: 300 }, // 活动地址（详情地址）
              { name: "IsRegistration" }, // 是否需要报名 （0否   1是 ）
              { name: "RegistrationStartTime", width: 160 }, // 报名开始时间
              { name: "RegistrationEndTime", width: 160 }, // 报名结束时间
              { name: "StartTime", width: 160 }, // 活动开始时间
              { name: "EndTime", width: 160 }, // 活动结束时间
              { name: "Status", show: false }, // Status
              { name: "StatusName" }, // StatusName
              { name: "CreateTime", width: 160 }, // 创建时间
              { name: "Accommodate", show: false }, // 活动容纳人数
              { name: "CreateUserID", show: false }, // 创建人
              { name: "Description", show: false }, // 活动介绍
              { name: "ID", show: false }, // ID
              { name: "MainPicturePath", show: false }, // 主图URL（1张）
              { name: "PvCount", show: false }, // 浏览量
              { name: "SecondaryPicturePath", show: false }, // 附图URL（3张）
              { name: "TypeID", show: false }, // 活动类别
              { name: "UpdateTime", show: false }, // 维护时间
              { name: "UpdateUserID", show: false }, // 维护人
              { name: "XAxis", show: false }, // 活动地址经度
              { name: "YAxis", show: false }, // 活动地址纬度
              { name: "Number", show: false },	// Number
              { name: "ProjectID", show: false },	// ProjectID
              { name: "ProjectIDName", show: false },	// ProjectID
            ],
            paramData: {}
          },
          configWidth: 80
        }
      },
      messageList: {},
      searchValue: "",
      activityId: null
    };
  },
  created() {
    this.init();
  },
  methods: {
    // 修改状态
    init() {
      const data = this.list.contract.data;
      let company = this.octopus.passport.authorization.company;
      data.paramData.CompanyID = company == 1 ? "NULL" : company;
    },
    output: function (data) {
      this.octopus.tips.success("下载完成。");
    },
    // 精细化查询
    search(statusDtata) {
      this.statusDtata = statusDtata;
      const data = this.list.contract.data.cellData;
      data.map(item => {
        if (item.name == "Status") {
          (item.filterKey = "IN"), (item.filterValue = this.statusDtata);
        }
      });
      this.list.contract.control.load();
    },
    showMsgDialog(row) {
      this.messageList = row.data.row;
      this.$nextTick(() => {
        this.$refs.activityMsg.showDialog();
      });
    },
    showEditDialog(row) {
      if(row.data.row.Status != 0){
        return
      }
      this.activityId = row.data.row.ID;
      this.messageList = row.data.row;
      this.$nextTick(() => {
        this.$refs.editActivity.showDialog();
      });
    },
    refresh() {
      this.list.contract.control.load();
    },
    delActivity(row) {
      
      if(row.data.row.Status != 0){
        return
      }
      this.$confirm("此操作将永久删除该项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.octopus.request.api.post(
            "/Octopus/Engine/Item",
            {
              id: 1341, // 菜单表的八爪鱼ID
              type: "UPDATE",
              value: row.data.row.ID,
              cellData: [{ name: "Status", defaultValue: 2 }]
            },
            data => {
              if (data.status.code === 200) {
                this.list.contract.control.load();
              } else {
                this.octopus.tips.error(data);
              }
            }
          );
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    fdrawerOp() {
      this.$refs.ScreenActivity.drawerOp();
    },
    handleCreate() {
      this.activityId = "";
      this.$refs.editActivity.showDialog();
    },
    searchEnterKeyPress(e) {
      if (e.target.value == this.searchValue) {
        return;
      }
      this.searchValue = e.target.value;
      this.list.contract.data.cellData[0].filterKey = "Like";
      this.list.contract.data.cellData[0].filterValue = this.searchValue;
      this.list.contract.control.load();
    }
  },
  props: ["oData"]
};
</script>
<style scoped>
.top_box {
  width: 100%;
  height: 5.3rem;
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
  padding-bottom: 1.2rem;
  box-sizing: border-box;
}

.top_box .search_box {
  width: 32rem;
  height: 100%;
  border: 1px solid #f0f0f0;
  border-radius: 4rem;
  display: flex;
  justify-content: space-between;
  padding: 0 0.8rem;
  box-sizing: border-box;
}

.top_box .search_box input {
  border: none;
  outline: none;
  width: 70%;
}

.top_box .search_box img {
  cursor: pointer;
}

.top_box .button_box button {
  width: 15rem;
  height: 100%;
  border-radius: 4rem;
  border: none;
  color: #fff;
  background-color: #f78c52;
  box-shadow: 0px -3px 4px 0px rgba(204, 190, 186, 0.4);
  font-size: 1.7rem;
  cursor: pointer;
}

.top_box .button_box button {
  margin-right: 1.3rem;
}

.el-message-box {
  background-color: #fff !important;
}

.btnclass {
  margin-left: 4px;
  border: none;
  padding: 2px 4px;
  border-radius: 2px;
  white-space: nowrap;
}

.info {
  background-color: #f78c51;
  color: #fff;
}

.img_box {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.img_box img {
  width: 25px;
  cursor: pointer;
}

.img_box .disable {
  cursor: not-allowed;
  opacity: 0.5;
}

>>>.Content {
  height: 84vh !important;
}

.can_edit {
  opacity: 0.5;
}
</style>
